<template>
  <div class="app-container" ref="appContainer">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      :ifInputData="true"
      :unadd="false"
      @reset="reset"
      @onSubmit="onSubmit"
      @inputData="inputData"
      @handleAll="handleAll"
    >
      <template v-slot:operation="scope">
        <el-button type="primary" size="small" icon="Warning" @click="addOrEdit(scope.row)">
          手动处理
        </el-button>
        <!--         <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
            删除
          </el-button> -->
      </template>
    </PropTable>
    <AddOrEditDrawer ref="addOrEditRef" @getData="after"></AddOrEditDrawer>
    <DataHandleAll ref="dataHandleAll" @getData="after"></DataHandleAll>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    postRawRecordPageLike,
    getRawRecordProcessAll,
  } from '@/api/controller/raw-record-controller/index'
  const loading = ref(true)
  const appContainer = ref(null)
  import PropTable from '@/components/Table/PropTable/index.vue'
  import AddOrEditDrawer from './components/addOrEditDrawer.vue'
  import DataHandleAll from './components/dataHandleAll.vue'
  import { ifWaiting } from '@/utils/waiting'
  const column = ref([
    {
      name: 'processed',
      label: '是否处理',
      width: 100,
      inSearch: true,
      valueType: 'select',
      itemIf: true,
      showType: 'tag',
      failType: true,
      fixed: 'right',
      options: [
        { value: 0, label: '未处理' },
        { value: 1, label: '处理失败' },
      ],
    },
    { name: 'communityName', label: '小区名称', inSearch: true, valueType: 'input', width: 180 },
    { name: 'siteName', label: '站点名称', inSearch: true, valueType: 'input', width: 180 },
    { name: 'detail', label: '插座号', width: 150 },
    { name: 'paymentAmount', label: '支付金额(元)', width: 120 },
    { name: 'actualSpending', label: '实际花费(元)', width: 120 },
    { name: 'actualCharges', label: '实际收费(元)', width: 120 },
    { name: 'profitAmount', label: '结算利润(元)', width: 120 },
    { name: 'startTime', label: '开始时间', width: 150 },
    { name: 'endTime', label: '结束时间', width: 150 },
    { name: 'settlementTime', label: '结算时间', width: 150 },
    { name: 'duration', label: '充电时长(分钟)', width: 140 },
    { name: 'power', label: '电量消耗(瓦/时)', width: 140 },
    { name: 'channel', label: '渠道', width: 100 },
    { name: 'type', label: '支付方式', width: 100 },
    { name: 'endError', label: '结束错误', width: 100 },
    { name: 'settlementAmount', label: '结算金额', width: 100 },
    { name: 'fee', label: '支付通道手续费', width: 140 },
    { name: 'qinhai', label: '庆海电子', width: 100 },
    { name: 'serviceFee', label: '服务费', width: 100 },
    { name: 'operation', slot: true, fixed: 'right', width: 130, label: '操作', itemIf: false },
  ])
  const data = ref(null)
  const tableData = ref(null)
  const addOrEditRef = ref()
  const addOrEdit = async (row?) => {
    addOrEditRef.value.show(row)
  }
  // 删除当前项
  const del = async (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        const result = await deleteSysUserDel({ id: row.id })
        if (result.code === 200) {
          loading.value = true
          const result = await postSysUserSearch(tableData.value?.formInline)
          data.value = result.data
          loading.value = false
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postRawRecordPageLike({ ...pageInfo, ...{ processed: 1 } })
      tableData.value.formInline.processed = 1
      column.value[column.value.length - 1].itemIf = false
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      const result = await postRawRecordPageLike(val)
      column.value[column.value.length - 1].itemIf = !(tableData.value.formInline.processed === 1)
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //初始化
  onMounted(async () => {
    reset()
  })

  const dataHandleAll = ref()
  const inputData = () => {
    dataHandleAll.value.show()
  }

  const after = async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postRawRecordPageLike({
        ...pageInfo,
        ...{ processed: tableData.value.formInline.processed },
      })
      column.value[column.value.length - 1].itemIf = tableData.value.formInline.processed === 0
      data.value = result.data
    } finally {
      loading.value = false
    }
  }

  const handleAll = () => {
    ifWaiting(() => {
      getRawRecordProcessAll().then((res) => {
        let b = new Blob([res]) //拿到文件流下载对象
        let url = window.URL.createObjectURL(b) //生成文件流下载链接
        let a = document.createElement('a') //创建一个a标签用来跳转
        a.href = url // a标签 href  赋值 链接
        a.download = '数据处理结果.txt' //设置下载文件的文件名和文件格式
        document.body.appendChild(a) //将标签DOM，放置页面
        a.click()
        window.URL.revokeObjectURL(url) //释放 url 对象内存
        document.body.removeChild(a) //移除标签节点
        after()
      })
    })
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
